<template>
  <page-layout>
    <template v-slot:header>
      <el-select v-model="addQuery.shop_name"
                    size="samll"     
                    label-width="100px"
                    placeholder="请选择活动区域">
                    <div v-for="it in shopList" :key="it">
                        <el-option :label="it" :value="it"></el-option>
                    </div>
                    </el-select>
      <el-input
        v-model="query.user_name"
        placeholder="输入用户姓名"
        size="small"
      />
      <el-button type="primary" size="small" @click="queryEvt">查询</el-button>
      <el-button type="success" size="small" @click="addShop">新增</el-button>
    </template>
    <el-table :data="tableData" style="width: 100%" height="100%" size="small">
      <el-table-column prop="user_name" label="填写人" width="120" fixed="left">
      </el-table-column>
      <el-table-column prop="shop_name" label="所属门店" width="160">
      </el-table-column>
      <el-table-column prop="time" label="填写时间" width="180">
      </el-table-column>
      <el-table-column prop="lng" label="经度" width="210" />
      <el-table-column
        prop="lat"
        label="纬度"
        show-overflow-tooltip
        width="260"
      />
      <el-table-column
        prop="address"
        label="内容"
        :show-overflow-tooltip="true"
        width="320"
      />
      width="280"/>
    </el-table>

    <ShopPicter v-model="show" @pickDataEvt="pickDataEvt" />
    <template v-slot:footer>
      <el-pagination
        :page-sizes="[20, 50, 100, 150]"
        :page-size="query.size"
        :current-page="query.page"
        @size-change="sizeChange"
        @current-change="currentChange"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </template>
  </page-layout>
</template>

<script>
import ShopPicter from "./ShopPicter.vue";
import { shopListApi, shopRecordsApi } from "../../../apis/shopApi";
export default {
  components: { ShopPicter },
  props: {
    value: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
        addQuery:{
            user_id:'',
            user_name:'',
            shop_id:'',
            shop_name:'',
            lng:'104.047485000000211',
            lat:'30.637064879440818',
            address:'',
            time:''
                },
      show: false,
      tableData: [],
      total: 0,
      query: {
        page: 1,
        size: 20,
      },
      changeTimer: null,
      medicalType: [],
      levelType: [],
      shopList: [],
    };
    
  },

  filters: {},

  directives: {},

  async mounted() {
    this.getShopList();
    this.getList();
  },

  methods: {
    addProduct() {
      this.show = true;
    },
    pickDataEvt(rows) {
      this.$emit(
        "input",
        rows.map((it) => ({
          detail_id: it.id,
          name: it.name,
          count: 0,
          price: it.price,
          supplier_name: "",
          type: it.type,
          unit: it.unit,
          level: it.level,
          place: it.place,
          brand: it.brand,
          remark: it.remark,
        }))
      );
    },
    deleteEvt(id) {
      this.$emit(
        "input",
        this.value.filter((it) => it.detail_id !== id)
      );
    },
    addShop() {
      this.show = true;
    },
    // 根据新的条件进行查询，那么必须从第一页开始查询
    async queryEvt() {
      this.query.page = 1;
      this.getList();
      this.getShopList();
    },
    // 获取列表数据的方法
    async getList() {
      let result = await shopRecordsApi(this.query);
      console.log(result);
      if (result.code === 200) {
        this.tableData = result.data.rows;
        this.total = result.data.count;
      }
    },
    async getShopList() {
      this.loading = true;
      let result = await shopListApi(this.query);
      console.log(result);
      if (result.code === 200) {
        this.shopList = result.data.rows.map((it) => it.shop_name);
        console.log(this.shopList)
      }
    },
    sizeChange(size) {
      this.query.size = size;
      if (this.changeTimer) clearTimeout(this.changeTimer);
      this.changeTimer = setTimeout(() => {
        this.getList();
      }, 100);
    },
    currentChange(page) {
      this.query.page = page;
      if (this.changeTimer) clearTimeout(this.changeTimer);
      this.changeTimer = setTimeout(() => {
        this.getList();
      }, 100);
    },
    detailEvt(data) {
      this.$router.push("/product/detail?id=" + data.id);
    },
  },
};
</script>

<style lang="less" scoped>
.product-state {
  color: #999;
  &::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 6px;
    height: 6px;
    border-radius: 6px;
    background: #999;
    margin-right: 6px;
  }
  &.sale {
    color: #409eff;
    &::before {
      background: #409eff;
    }
  }
  &.new {
    color: #85ce61;
    &::before {
      background: #85ce61;
    }
  }
}
</style>